.card {
  margin: 32rpx;
}

.icon {
  padding: 8rpx;
  border-radius: 50%;
  color: white;
  font-size: 48rpx;
  line-height: 48rpx;
  text-align: center;
}

.text {
  margin-left: 16rpx;
  vertical-align: top;
}

.hover {
  opacity: 0.5;
}

.image {
  transform: rotateY(130deg);
  -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
}

.view {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  // --bottom-sheet-max-height: 80vh;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #000;
  --cell-background-color: transparent;

  .pageTips {
    font-size: 24rpx;
    line-height: 44rpx;
    color: #fff;
    opacity: 0.5;
    margin-left: 20rpx;
    margin-block: 18rpx;
  }
  // background-color: #07476a;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 718rpx;
  height: 160rpx;
  background-color: #232323;
  margin-inline: auto;
  border-radius: 24rpx;
  color: #fff;
  padding-left: 58rpx;
  padding-right: 38rpx;
  margin-bottom: 16rpx;

  .time {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .timeText {
    font-size: 64rpx;
    // line-height: 44rpx;
    font-weight: 700;
  }
  .durationText {
    font-size: 28rpx;
    line-height: 42rpx;
  }
}

.content {
  color: #fff;
  min-height: 382rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .buttonGroup {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60rpx;
    width: 100%;
    padding-inline: 40rpx;
    .button {
      height: 108rpx;
      width: 288rpx;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-weight: 600;
      font-size: 32rpx;
      background-color: #979797;
      // &:not(:last-child) {
      //   // margin-right: 24rpx;
      //   background-color: ;
      // }
      &:nth-child(2) {
        background-color: #5698db;
      }
    }
  }
  .titleText {
    font-size: 48rpx;
    font-weight: 700;
    margin-top: 80rpx;
    margin-bottom: 40rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .tipsText {
    font-size: 40rpx;
    line-height: 42rpx;
    width: 520rpx;
    margin: 0 auto;
    margin-bottom: 60rpx;
  }

  .setGroup {
    // background-color: #fcf;
    width: 100%;
    padding: 40rpx 30rpx;
    --cell-border-color: #474747;
    --cell-active-color: #474747;
    --cell-value-color: #5698db;
    // --cell-text-color:#fff;
    margin-bottom: 60rpx;

    .valueText {
      font-size: 30rpx;
    }

    // --cell-text-color:
  }

  .editTitle {
    font-weight: 600;

    font-size: 28rpx;
    line-height: 42rpx;
    color: #fff;
    margin: 30rpx auto;
  }

  .pickerBox {
    width: 100%;
    padding: 0 80rpx;
    margin: 30rpx auto;
    --picker-background-color: transparent;
    --picker-option-text-color: #fff;
    --picker-option-selected-text-color: #fff;
    --picker-option-unit-text-color: rgba(255, 255, 255, 0.4);
    --hairline-border-image-color: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0.1)
    );
  }

  .timePickerBox {
    width: 100%;
  }
}

.scrollView {
  margin-bottom: 300rpx;
  padding-bottom: 100rpx;
  // height: 00rpx;
}

.cellGroup {
  margin-bottom: 200rpx;
}

.addButtonBox {
  position: fixed;
  bottom: 0rpx;
  left: 0rpx;
  width: 100%;
  height: calc(env(safe-area-inset-bottom) + 186rpx);
  z-index: 33;
  background-color: #000;
  .addButton {
    height: 96rpx;
    width: 686rpx;
    border-radius: 48rpx;
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom) + 90rpx);
    left: 32rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #5698db;
    color: #fff;
  }

  .disabledBtn {
    opacity: 0.3;
  }
}
